<template>
	<view class="container">
		<view class="" style="background-color: #ffffff; width: 750rpx;">
			<dropdown-screen @query ='query' ></dropdown-screen>
		</view>
		
		
		<view class="case">
			<view class="case-one" v-for="(item,index) in pageList" :key="index">
				<navigator :url="'floor?id='+item.id">
					<image class="case-image" :src="item.thumb"></image>
					<view class="case-details">
						<view class="case-details-text">{{item.name}}</view>
						<view class="case-details-text_bottom">{{item.model.name+'/'+item.style.name}}</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				example: [false, false, false],
				queryList:['','',''],
				value: 0,
				candidates: [],
				iShow: false,
				pages: {
					page: 1, //页码
					limit: 10, //分页偏移量（即每页多少条数据）
					area: 0, //区域
					style: 0, //风格
					model: 0, //户型
				},
				pageList: []

			}
		},
		methods: {
			
			pageData() {
				this.$http.post('/system/getBuildList', this.pages).then(res => {
					console.log(res);
					if (res.data.code == 100002) {
						return
					}
					this.pageList = res.data.data.list
					this.pages.page = res.data.data.page
					this.pages.limit = res.data.data.limit
				})
			},
			query(a) {
				
				if(a.types ==0){
					console.log();
					this.pages.area=a.name
				}else if(a.types ==1){
					this.pages.style=a.name
				}else{
					this.pages.model=a.name
				}
				this.$http.post('/system/getBuildList', this.pages).then(res => {
					console.log(res);
					if (res.data.code == 100002) {
						return
					}
					this.pageList = res.data.data.list
					this.pages.page = res.data.data.page
					this.pages.limit = res.data.data.limit
					console.log(this.pageList);
				})
			}
		},
		onLoad() {
			this.pageData()
		},
		onReachBottom() {
			this.pages.page = this.pages.page + 1
			this.pageData()
		},
		// computed: {
		// 	querylist() {
		// 		let a = [
		// 			[],
		// 			[],
		// 			[]
		// 		]

		// 		console.log(a);
		// 		return this.pageList
		// 	}
		//}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;

		.example-body {
			display: flex;
			flex-direction: row;
			width: 750rpx;
			height: 98rpx;
			background: #ffffff;
			justify-content: space-around;
			align-items: center;

			.example_is {
				color: #3d9c36;
			}

			.example_on {
				color: #000000;
			}

			.example_image {
				margin-left: 10rpx;
				width: 20rpx;
				height: 16rpx;
				// transform: rotate(180deg);
			}
		}

		.select {
			padding-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			background: #ffffff;

			.select_is {
				color: #3d9c36;
				margin-bottom: 20rpx;
			}

			.select_on {
				color: #000000;
				margin-bottom: 20rpx;
			}
		}

		.case {
			margin-top: 20rpx;
			margin-left: 40rpx;
			margin-right: 22rpx;
			display: flex;
			flex-wrap: wrap;

			.case-one {
				margin-top: 20rpx;
				margin-right: 20rpx;
				width: 324rpx;
				height: 298rpx;

				.case-image {
					width: 324rpx;
					height: 196rpx;
					border-radius: 12rpx 12rpx 0rpx 0rpx;
				}

				.case-details {
					margin-top: -10rpx;
					width: 324rpx;
					height: 98rpx;
					background: #ffffff;
					border-radius: 0rpx 0rpx 12rpx 12rpx;

					.case-details-text {
						padding-left: 20rpx;
					}

					.case-details-text_bottom {
						font-size: 20rpx;
						padding-top: 14rpx;
						padding-left: 20rpx;
						color: #666666;
					}
				}
			}
		}

	}
</style>
